<template>
  <mars-dialog :draggable="true" title="属性编辑" width="260" top="60" bottom="40" right="10" :minWidth="200">
    <div class="top-handle-bar">
      <a-space>
        <mars-icon icon="send" width="20" @click="flyToOverlay" title="飞行定位"></mars-icon>
        <mars-icon icon="delete" width="20" @click="deleteEntity" title="删除"></mars-icon>
        <mars-icon icon="save" width="20" @click="getGeoJson" title="导出geojson"></mars-icon>
        <a-upload
          :multiple="false"
          name="file"
          accept=".json,.geojson"
          :file-list="fileList"
          :showUploadList="false"
          :supportServerRender="true"
          :beforeUpload="() => false"
          @change="onClickImpFile"
        >
          <mars-icon icon="folder-open" width="20" @click="loadGeoJson" title="导入geojson"></mars-icon>
        </a-upload>
      </a-space>
    </div>
    <div class="attr-editor-main">
      <mars-styles :style="style" :layerName="layerName" :customType="customType" :overlayType="overlayType"
                   @styleChange="styleChange" />
      <external-comp :options="externalOptions" :comp-config="externalCompCfg" @valueChange="valueChange" />
    </div>
  </mars-dialog>
</template>

<script setup>
import { ref, onMounted, toRaw, toValue, inject } from "vue"
import MarsStyles from "./mars-styles.vue"
import useLifecycle from "@/common/uses/use-lifecycle"
import * as mapWork from "./map"
import _ from "lodash"

import { useWidget } from "@/common/store/widget"
import ExternalComp from "@/widgets/overlay-editor/external-comp.vue"

const {
  currentWidget,
  disable
} = useWidget()
const style = ref(null)
const customType = ref("")
const overlayType = ref("")
const fileList = ref([])
const externalOptions = ref({
  alt: 10
})
const externalCompCfg = ref([{
  name: "alt",
  label: "高度",
  type: "slider",
  min: 0.0,
  max: 1000000000.0,
  step: 1000,
  defval: 0.0
}])

let overlay, equipPlotLayer

// 启用map生命周期
useLifecycle(mapWork)

onMounted(() => {
  equipPlotLayer = window?.$equipPlotLayer
  overlay = toRaw(toValue(currentWidget.data.overlay))
  updateLayer()
})

if (currentWidget) {
  currentWidget.onUpdate((e) => {
    overlay = toRaw(toValue(e.data.overlay))
    updateLayer()
  })
}

function getGeoJson () {
  DE.Util.downloadFile("标绘item.json", JSON.stringify(overlay.toGeoJSON()), true)
}

// 打开geojson
const onClickImpFile = (info) => {
  const item = info.file
  const fileName = item.name
  const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()

  if (fileType === "json" || fileType === "geojson") {
    const reader = new FileReader()
    reader.readAsText(item, "UTF-8")
    reader.onloadend = function(e) {
      const geojson = JSON.parse(this.result)
      console.log("打开了json文件", geojson)
      let layer = equipPlotLayer
      if (geojson.properties.type === "airborneradar") {
        layer = window?.$effectsLayer
      }
      layer.loadGeoJSON(geojson, { flyTo: true })
    }
  } else {
    this.$message("暂不支持 " + fileType + " 文件类型的数据！")
  }
}

function styleChange (style) {
  style = toRaw(style)
  console.log("修改了style样式", style)
  if (style.label) {
    overlay.setLabel(style.label.text || overlay.textStyle.text, style.label)
    console.log(overlay.textStyle)
  }
  overlay.setStyle(style)
}

function valueChange (value) {
  console.log("修改了value-- ", value)
  const { alt } = value
  if (alt) {
    overlay.position = {
      lng: +overlay.position.lng,
      lat: +overlay.position.lat,
      alt: +value
    }
  }
}

// 监听到矢量数据发生变化
function updateLayer () {
  if (!overlay) {
    return null
  }

  style.value = {
    ...overlay.style,
    label: { ...overlay.textStyle }
  }
  overlayType.value = overlay?.type.toLocaleLowerCase()

  customType.value = currentWidget.data.styleType || overlay?.type.toLocaleLowerCase()
}

function flyToOverlay () {
  overlay && overlay.flyTo() // 事件处理
}

function deleteEntity () {
  overlay && overlay.remove() // 删除
  currentWidget && disable(currentWidget.name)
}
</script>

<style scoped lang="less">
.top-handle-bar {
  border-bottom: 1px solid #cde1de;
  padding: 5px 0 2px 0;

  :deep(.mars-icon) {
    cursor: pointer;
  }
}

.attr-editor-main {
  height: calc(100% - 40px);
  overflow-y: auto;

  :deep(*) {
    font-size: 12px;
  }
}

:deep(.ant-tabs-nav) {
  margin: 0;
}

:deep(.ant-select),
:deep(.ant-input-number) {
  width: 100%;
}
</style>
